import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home/Home.vue'
import Category from '../views/category'
import SubCategory from '../views/category/SubCategory'
import Cart from '../views/cart'
import Mine from '../views/mine'
import NavBar from '../components/nav-bar'
import TabBar from '../components/tab-bar'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    components: { // 设置命名视图中渲染的关联组件
      header: NavBar,
      default: Home,
      footer: TabBar
    },
    meta: { // 路由元信息，用于存放开发过程中与当前路径相关的一些额外数据
      title: '首页',
      icon: '&#xe619;',
      inTabbar: true
    }
  },
  {
    path: '/category',
    name: 'Category',
    components: {
      header: NavBar,
      default: Category,
      footer: TabBar
    },
    meta: {
      title: '分类',
      icon: '&#xe61a;',
      inTabbar: true
    },
    children: [
      {
        path: 'sub/:id',
        component: SubCategory,
        meta: {
          title: '子分类'
        }
      }
    ]
  },
  {
    path: '/cart',
    name: 'Cart',
    components: {
      header: NavBar,
      default: Cart,
      footer: TabBar
    },
    meta: {
      title: '购物车',
      icon: '&#xe61b;',
      inTabbar: true
    }
  },
  {
    path: '/mine',
    name: 'Mine',
    components: {
      default: Mine,
      footer: TabBar
    },
    meta: {
      title: '我的',
      icon: '&#xe61c;',
      inTabbar: true
    }
  }
]

export default routes
